<template>
  <div>
    <div class="note">
      <div class="note-top"></div>
      <!-- 头部 -->
      <div class="note-header">
        <ul v-for="(item, index) in topicsList" :key="index">
          <li v-for="(k, i) in item" :key="i">
            <span> # {{ k.name }} </span>
          </li>
        </ul>
      </div>

      <!-- 内容 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getHomeNotesFun"
        style="padding-bottom: 60px"
      >
        <div class="note-content">
          <div class="content-left">
            <!-- <div class="left-top">
              <i class="iconfont icon-dianzan"></i>
              <span>点击发现精彩内容</span>
            </div> -->
            <ul class="left-bottom">
              <li v-for="(item, index) in leftList" :key="index">
                <div v-if="item.type == 2">
                  <div class="bottom-img">
                    <img :src="item.activity.image" alt="" />
                  </div>
                  <div class="bottom-context">
                    <span>{{ item.activity.author.n }}</span>
                  </div>
                  <div class="bottom-user">
                    <div class="user-left">
                      <img :src="item.activity.author.p" alt="" />
                      <span>{{ item.activity.author.n }}</span>
                    </div>
                    <div class="user-right">
                      <i class="iconfont icon-xiugai"></i>
                      <span>{{ item.activity.action_title }}</span>
                    </div>
                  </div>
                </div>

                <div v-if="item.type == 1">
                  <div class="bottom-img">
                    <img :src="item.note.image_u" alt="" />
                  </div>
                  <div class="bottom-context">
                    <span>{{ item.note.title }}</span>
                  </div>
                  <div class="bottom-user">
                    <div class="user-left">
                      <img :src="item.note.author.p" alt="" />
                      <span>{{ item.note.author.n }}</span>
                    </div>
                    <div class="user-right">
                      <i class="iconfont icon-aixin"></i>
                      <span>{{ item.note.like_count }}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="content-right">
            <ul class="right-bottom">
              <li v-for="(item, index) in rightList" :key="index">
                <div v-if="item.type == 2">
                  <div class="bottom-img">
                    <img :src="item.activity.image" alt="" />
                  </div>
                  <div class="bottom-context">
                    <span>{{ item.activity.author.n }}</span>
                  </div>
                  <div class="bottom-user">
                    <div class="user-left">
                      <img :src="item.activity.author.p" alt="" />
                      <span>{{ item.activity.author.n }}</span>
                    </div>
                    <div class="user-right">
                      <i class="iconfont icon-xiugai"></i>
                      <span>{{ item.activity.action_title }}</span>
                    </div>
                  </div>
                </div>

                <div v-if="item.type == 1">
                  <div class="bottom-img">
                    <img :src="item.note.image_u" alt="" />
                  </div>
                  <div class="bottom-context">
                    <span>{{ item.note.title }}</span>
                  </div>
                  <div class="bottom-user">
                    <div class="user-left">
                      <img :src="item.note.author.p" alt="" />
                      <span>{{ item.note.author.n }}</span>
                    </div>
                    <div class="user-right">
                      <i class="iconfont icon-aixin"></i>
                      <span>{{ item.note.like_count }}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getHomeNotes } from "../../api/home/note";
export default {
  name: "note",
  data() {
    return {
      loading: false,
      finished: false,
      topicsList: [],
      noteList: [],
      leftList: [],
      rightList: [],
    };
  },
  methods: {
    getHomeNotesFun() {
      getHomeNotes({ offset: 0, limit: 40 }).then((data) => {
        // console.log("笔记数据", data.result);

        // 顶部列表
        let topics = data.result.topics;
        this.topicsList = topics;

        //笔记数据
        let list = data.result.list;
        this.noteList = list;
        list.forEach((element, index) => {
          if (index % 2 == 0) {
            this.leftList.push(element);
          } else {
            this.rightList.push(element);
          }
        });
        // console.log("leftList", this.leftList);
        // console.log("rightList", this.rightList);

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.noteList.length >= 40) {
          this.finished = true;
        }
      });
    },
  },
  created() {
    // this.getHomeNotesFun();
  },
};
</script>

<style lang="less">
.note {
  .note-top {
    width: 100%;
    height: 105px;
  }
  // 头部
  .note-header {
    height: auto;
    margin-top: 10px;
    overflow-x: scroll;
    ul {
      width: 666px;
      margin-bottom: 10px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: auto;
        margin: 10px;
        span {
          height: 36px;
          font-size: 14px;
          border-radius: 20px;
          color: #17717a;
          background-color: #f3f8fb;
          padding: 5px 10px;
        }
      }
    }
    ul:nth-last-child(1) {
      li:nth-last-child(1) {
        span {
          border: 1px solid #17717a;
        }
      }
    }
  }
  .note-header::-webkit-scrollbar {
    display: none;
  }
  // 内容
  .note-content {
    width: 365px;
    margin: 5px 5px 0px;
    box-sizing: border-box;
    display: flex;
    .content-left {
      width: 49%;
      margin-right: 5px;
      .left-top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #ffca30;
        display: flex;
        i {
          font-size: 22px;
          margin-left: 10px;
        }
        span {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          margin-left: 15px;
        }
      }
      .left-bottom {
        li {
          width: 100%;
          margin-top: 10px;
          .bottom-img {
            width: 100%;
            height: auto;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            img {
              width: 100%;
              height: auto;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
            }
          }
          .bottom-context {
            width: 94%;
            margin: 10px;
            span {
              font-size: 14px;
              font-weight: bold;
              color: #111;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
          .bottom-user {
            font-weight: bold;
            display: flex;
            align-items: center;
            .user-left {
              width: 69%;
              height: 26px;
              display: flex;
              align-items: center;
              img {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                margin-left: 6px;
              }
              span {
                font-size: 12px;
                color: #969696;
                margin-left: 5px;
              }
            }
            .user-right {
              width: 31%;
              height: 26px;
              display: flex;
              align-items: center;
              i {
                font-size: 16px;
                border-radius: 50%;
                color: #18737d;
                margin-left: 6px;
              }
              span {
                font-size: 12px;
                color: #969696;
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
    .content-right {
      width: 49%;
      .right-bottom {
        li {
          width: 100%;
          margin-bottom: 10px;
          .bottom-img {
            width: 100%;
            height: auto;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            img {
              width: 100%;
              height: auto;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
            }
          }
          .bottom-context {
            width: 94%;
            margin: 10px;
            span {
              font-size: 14px;
              font-weight: bold;
              color: #111;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
          .bottom-user {
            font-weight: bold;
            display: flex;
            align-items: center;
            .user-left {
              width: 69%;
              height: 26px;
              display: flex;
              align-items: center;
              img {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                margin-left: 6px;
              }
              span {
                font-size: 12px;
                color: #969696;
                margin-left: 5px;
              }
            }
            .user-right {
              width: 31%;
              height: 26px;
              display: flex;
              align-items: center;
              i {
                font-size: 16px;
                border-radius: 50%;
                color: #18737d;
                margin-left: 6px;
              }
              span {
                font-size: 12px;
                color: #969696;
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>